<template>
  <div class="full-calendar-body">
    <div class="weeks">
      <strong class="week" v-for="(week, idx) in weekNames" :key="idx">{{week}}</strong>
    </div>
    <div class="dates" ref="dates">
      <div class="dates-bg">
        <div class="week-row" :key="weekIndex" v-for="(week, weekIndex) in currentDates">
          <div
            class="day-cell"
            :key="weekIndex+'_'+ dayIndex"
            v-for="(day, dayIndex) in week"
            :class="{'today' : day.isToday,
              'not-cur-month' : !day.isCurMonth}"
          >
            <p class="day-number">{{day.monthDay}}</p>
          </div>
        </div>
      </div>

      <!-- absolute so we can make dynamic td -->
      <div class="dates-events">
        <div class="events-week" v-for="(week, weekIndex) in currentDates" :key="weekIndex">
          <div
            :key="weekIndex+'_'+dayIndex"
            class="events-day"
            v-for="(day, dayIndex) in week"
            track-by="$index"
            :class="{'today' : day.isToday,
              'not-cur-month' : !day.isCurMonth}"
            @click.stop="dayClick(day.date, $event)"
          >
            <p class="day-number">{{day.monthDay}}</p>
            <div class="event-box">
              <p
                class="event-item"
                :key="weekIndex +''+eventIndex"
                v-for="(event, eventIndex) in day.events"
                v-show="event.cellIndex <= eventLimit"
                :class="[classNames(event.cssClass), {
                  'is-start'   : isStart(event.start, day.date),
                  'is-end'     : isEnd(event.end,day.date),
                  'is-opacity' : !event.isShow
                  }]"
                @click="eventClick(event,$event)"
              >{{isBegin(event, day.date, day.weekDay)}}</p>
              <p
                v-if="day.events.length > eventLimit"
                class="more-link"
                @click.stop="selectThisDay(day, $event)"
              >+ {{day.events[day.events.length -1].cellIndex - eventLimit}} more</p>
            </div>
          </div>
        </div>
      </div>
      <slot name="body-card"></slot>
    </div>
  </div>
</template>
<script type="text/babel">
import bodyModule from './body.js'
export default {
  ...bodyModule
}
</script>
<style lang="scss" scoped>
.full-calendar-body {
  margin-top: 20px;
  .weeks {
    display: flex;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    .week {
      flex: 1;
      text-align: center;
      border-right: 1px solid #e0e0e0;
    }
  }
  .dates {
    position: relative;
    .week-row {
      // width: 100%;
      // position:absolute;
      border-left: 1px solid #e0e0e0;
      display: flex;
      .day-cell {
        flex: 1;
        min-height: 100px;
        padding: 4px;
        border-right: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        .day-number {
          text-align: right;
        }
        &.today {
          background-color: #fcf8e3;
        }
        &.not-cur-month {
          .day-number {
            color: rgba(0, 0, 0, 0.24);
          }
        }
      }
    }
    .dates-events {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      .events-week {
        display: flex;
        .events-day {
          cursor: pointer;
          flex: 1;
          min-height: 109px;
          overflow: hidden;
          text-overflow: ellipsis;
          .day-number {
            text-align: right;
            padding: 4px 5px 4px 4px;
            opacity: 0;
          }
          &.not-cur-month {
            .day-number {
              color: rgba(0, 0, 0, 0.24);
            }
          }
          .event-box {
            .event-item {
              cursor: pointer;
              font-size: 12px;
              background-color: #c7e6fd;
              margin-bottom: 2px;
              color: rgba(0, 0, 0, 0.87);
              padding: 0 0 0 4px;
              height: 18px;
              line-height: 18px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              &.is-start {
                margin-left: 4px;
                // border-top-left-radius:4px;
                // border-bottom-left-radius:4px;
              }
              &.is-end {
                margin-right: 4px;
                // border-top-right-radius:4px;
                // border-bottom-right-radius:4px;
              }
              &.is-opacity {
                opacity: 0;
              }
            }
            .more-link {
              cursor: pointer;
              // text-align: right;
              padding-left: 8px;
              padding-right: 2px;
              color: rgba(0, 0, 0, 0.38);
              font-size: 14px;
            }
          }
        }
      }
    }
    .more-events {
      position: absolute;
      width: 150px;
      z-index: 2;
      border: 1px solid #eee;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      .more-header {
        background-color: #eee;
        padding: 5px;
        display: flex;
        align-items: center;
        font-size: 14px;
        .title {
          flex: 1;
        }
        .close {
          margin-right: 2px;
          cursor: pointer;
          font-size: 16px;
        }
      }
      .more-body {
        height: 140px;
        overflow: hidden;
        .body-list {
          height: 120px;
          padding: 5px;
          overflow: auto;
          background-color: #fff;
          .body-item {
            cursor: pointer;
            font-size: 12px;
            background-color: #c7e6fd;
            margin-bottom: 2px;
            color: rgba(0, 0, 0, 0.87);
            padding: 0 0 0 4px;
            height: 18px;
            line-height: 18px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>
